<template>
	<view>
		<view class="example">
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData" border label-position="top">
				<uni-forms-item label="商品名" name="title" required>
					<uni-easyinput v-model="baseFormData.goodsName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="图片选择" name="picture" required>
					<image v-if="baseFormData.goodsImage" :src="baseFormData.goodsImage" mode=""></image>
					<button class="images" type="primary" @click="chooseImage">选择图片</button>
				</uni-forms-item>
				<uni-forms-item label="商品描述" name="title" required>
					<uni-easyinput v-model="baseFormData.goodsArticle" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="商品价格" name="title" required>
					<uni-easyinput v-model="baseFormData.goodsPrice" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="商品类别" name="title" required>
					<uni-data-select v-model="value" :localdata="type_item" @change="change_type"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="商品介绍" :border="true" required name="txt">
					<uni-easyinput type="textarea" autoHeight v-model="baseFormData.goodsIntroduce" placeholder="请输入内容" />
				</uni-forms-item>

				<button type="primary" @click="submit()">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import store from "@/store/index.js";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				value: 0,
				baseFormData: {
					userId: 0,
					goodsName: "",
					goodsImage: "",
					goodsPrice: null, //价格
					goodsArticle: ``,
					goodsIntroduce: '', //描述
					goodsType: '绿茶',
					goodsNumber: 100, //总计数量
					table: 'goods',
				},
				type_item: [{
						value: 0,
						text: "绿茶",
					},
					{
						value: 1,
						text: "红茶",
					},
					{
						value: 2,
						text: "乌龙茶",
					}, {
						value: 3,
						text: "白茶",
					},
					{
						value: 4,
						text: "黄茶",
					},
					{
						value: 5,
						text: "黑茶",
					},

				],
			}
		},
		methods: {
			...mapMutations('admin', ['getActivities']),
			//提交数据
			submit(ref) {
				//检验有必要的信息有没有填写
				this.baseFormData.userId = this.user.userId
				if (Object.values(this.baseFormData).every(item => {
						return item
					})) {
					uni.uploadFile({
						url: 'http://localhost:3000/images', // 替换为你的Node.js后端地址
						filePath: this.baseFormData.goodsImage,
						name: 'file',
						// formData: {
						// 	'id': state.userId
						// },
						success: (uploadRes) => {
							console.log(JSON.parse(uploadRes.data).filePath)
							let images = 'http://localhost:3000' + JSON.parse(uploadRes.data).filePath
							this.baseFormData.goodsImage = images
							// console.log("this.baseFormData.image:", this.baseFormData.image)
							// console.log('上传成功:', JSON.parse(uploadRes.data));
							// console.log(JSON.stringify(this.baseFormData))
							// 数据发给后端
							uni.request({
								url: 'http://localhost:3000/course',
								method: 'post',
								data: this.baseFormData,
								success: (res) => {
									console.log("res:", res)
									uni.reLaunch({
										url: '/pages/merchant/merchant-goods/merchant-goods'
									})
								},
							});
						},
						fail: (err) => {
							console.error('上传失败:', err);
						}
					});
					// uni.reLaunch({
					// 	url: '/pages/merchant/merchant-goods/merchant-goods'
					// })
				} else {
					console.log(JSON.stringify(this.baseFormData))
					uni.showToast({
						icon: 'error',
						title: '有些区域未填值',
						duration: 1000
					})
				}
			},
			//更改头像
			chooseImage() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						this.baseFormData.goodsImage = tempFilePaths[0]
					}
				});
			},
			change_type(e) {
				console.log(e)
				this.baseFormData.goodsType = this.type_item[this.value].text
			},
		},
		computed: {
			...mapState('user', ['user']),
		}
	}
</script>

<style scoped lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;

		.form {
			.images {
				width: 200rpx;
			}
		}
	}
</style>